<template>
  <div
    id="map-box"
    class="page-fs"
  />
</template>

<script setup>

import UtilMapBox from "./MapBox";
import {onMounted} from "vue";

let size = 200;


onMounted(() => {
  let map = UtilMapBox.init('map-box')

  map.on('load', function () {

    let width = 64; // The image will be 64 pixels square
    let bytesPerPixel = 4; // Each pixel is represented by 4 bytes: red, green, blue, and alpha.
    let data = new Uint8Array(width * width * bytesPerPixel);

    for (let x = 0; x < width; x++) {
      for (let y = 0; y < width; y++) {
        let offset = (y * width + x) * bytesPerPixel;
        data[offset + 0] = y / width * 255; // red
        data[offset + 1] = x / width * 255; // green
        data[offset + 2] = 128;             // blue
        data[offset + 3] = 255;             // alpha
      }
    }


    map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });

    map.addImage('gradient', {width: width, height: width, data: data});

    map.addLayer({
      "id": "points",
      "type": "symbol",
      "source": {
        "type": "geojson",
        "data": {
          "type": "FeatureCollection",
          "features": [{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [0, 0]
            }
          }]
        }
      },
      "layout": {
        "icon-image": "pulsing-dot"
      }
    });
  });



  let pulsingDot = {
    width: size,
    height: size,
    data: new Uint8Array(size * size * 4),

    onAdd: function() {
      let canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      this.context = canvas.getContext('2d');
    },

    render: function() {
      let duration = 1000;
      let t = (performance.now() % duration) / duration;

      let radius = size / 2 * 0.3;
      let outerRadius = size / 2 * 0.7 * t + radius;
      let context = this.context;

      // draw outer circle
      context.clearRect(0, 0, this.width, this.height);
      context.beginPath();
      context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
      context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
      context.fill();

      // draw inner circle
      context.beginPath();
      context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
      context.fillStyle = 'rgba(255, 100, 100, 1)';
      context.strokeStyle = 'white';
      context.lineWidth = 2 + 4 * (1 - t);
      context.fill();
      context.stroke();

// update this image's data with data from the canvas
      this.data = context.getImageData(0, 0, this.width, this.height).data;

// keep the map repainting
      map.triggerRepaint();

// return `true` to let the map know that the image was updated
      return true;
    }
  };
})
</script>

<style scoped>

</style>